<template>
  <div>
    <ul>
      <!-- v-for 语法:循环渲染解构 -->
      <!-- 要循环渲染谁，就把v-for写在哪个标签上 -->
      <li :key="index" v-for="(item, index) in arr">{{ item }}</li>
      <!-- vue支持数字来渲染，表示循环n个元素，循环遍历就是序号，从1开始 -->
    </ul>
    <p v-for="(item, index) in obj" :key="index">{{ item }}</p>
    <ul>
      <li v-for="(item, index) in 10" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "VueDemoApp",

  data() {
    return {
      arr: ["抽烟", "喝酒", "打麻将", "掐火锅"],
      obj: {
        username: "张三",
        age: 18,
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>